<template>
	<view class="my row">
		<view class="header"></view>
		<view class="personal">
			<image class="headPhoto" :src=" dataInfo.headPortraitImg || require('@/static/noIng.jpg')" mode=""></image>
			<view class="message">
				<view class="name">
					<text>{{ dataInfo.name }}</text>
					<view class="role">
						<text v-if="dataInfo.type== 2">志愿者</text>
						<text v-else-if="dataInfo.type == 3">医生</text>
						<text v-else>普通用户</text>
					</view>
				</view>
				<view class="phone">
					<text>{{mobile || '----'}}</text>
					<text v-if="dataInfo.type != 1" @click="fillIn">详情></text>
					<template v-else>
						<text class="authentication" v-if="dataInfo.status == 0 && dataInfo.authType == 1" @click="goAuthentication">去认证</text>
						<text class="authentication" v-if="dataInfo.status == 1 && dataInfo.authType == 2">志愿者审核中</text>
						<text class="authentication" v-if="dataInfo.status == 1 && dataInfo.authType == 3">医生审核中</text>
						<text class="authentication" v-if="dataInfo.status == -1" @click="goAuthentication">重新认证</text>
					</template>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="grid">
				<van-grid>
					<van-grid-item
						class="gridItem" 
						v-for="(item, index) in gridList" 
						:key="index"
						:icon="item.icon" 
						:text="item.text" 
						 @click="gridClick(item)"
					/>
				</van-grid>
			</view>
			<view class="cellBox">
				<van-cell 
					v-for="item,index in cellList" 
					:key="index" 
					:title="item.title"
					:icon="item.icon"
					link-type="navigateTo"
					:url="item.url"
					is-link
				/>
			</view>
		</view>
		<view class="bigTitle">康复者联盟</view>
		<van-toast id='van-toast' />
	</view>
</template>

<script>
	import { fileById } from '@/api/common'
	import { getByOwn, periodGetAll, purposeGetAll } from '@/api/my'
	export default {
		name: 'my',
		data() {
			return {
				editData: {
					readonly: true,
					value: this.$storage.getItem('userInfo').user.username
				},
				gridList: [
					{
						id: 1,
						icon: require('@/static/image/my/myCase.png'),
						text: '我的案例',
						url: "/pages/myCase/index",
						isShow: true,
						isExploit: true
					},
					{
						id: 2,
						icon:  require('@/static/image/my/myHelp.png'),
						text: '我的求助',
						url: "/pages/myHelp/index",
						isShow: true,
						isExploit: true
					},
					{
						id: 3,
						icon:  require('@/static/image/my/volunteerService .png'),
						text: '志愿服务',
						url: "/pages/doctorCenter/index",
						isShow: true,
						isExploit: true
					},
					{
						id: 4,
						icon:  require('@/static/image/my/message.png'),
						text: '消息',
						url: "/pages/tabbar/my/messageList",
						isShow: true,
						isExploit: true
					}
				],
				cellList: [
					{
						icon: require('@/static/image/my/myCollect.png'),
						title: '我的收藏',
						url: '/pages/user/aboutUs?id=10003'
					},
					{
						icon: require('@/static/image/my/feedback.png'),
						title: '意见反馈',
						url: '/pages/user/aboutUs?id=10004'
					},
					{
						icon: require('@/static/image/my/aboutUs.png'),
						title: '关于我们',
						url: '/pages/user/aboutUs?id=10002'
					}
				],
				dataInfo: {}
			}
		},
		onLoad(option) {
		},
		onShow() {
			if (this.$storage.getItem('userInfo')) {
				this.getUsrInfo()
				// this.getPeriodAll()
				// this.getPurposeAll()	
			} else {
				return this.$showModal({
					title: '提示',
					content: '您还登录，是否去登录？',
					showCancel: true
				},(suc)=> {
					if (suc) {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					} else {
						uni.switchTab({
							url: '/pages/tabbar/index/index'
						});
					}
				})
			}
		},
		computed: {
			mobile() {
				let iphone = this.dataInfo.phone || this.$storage.getItem('userInfo').user.mobile || '11111111111';
				iphone = iphone.replace(iphone.substring(3,7), "****")
				return iphone
			}
		},
		methods: {
			// grid跳转
			gridClick(item) {
				if (item.isShow) {
					if (item.isExploit) {
						if (item.isAttestation == 10 || item.id == 1 || item.id == 4) {
							uni.navigateTo({
								url: item.url
							})													
						} else if(item.isAttestation == '-1') {
							this.$toast.text('审核未通过，请重新认证')
						} else {
							this.$toast.text('您的身份正在审核中 请联系管理员审核通过')
						}
					} else {
						this.$toast.text('暂未开发此功能')
					}
				} else {
					this.$toast.fail('请先认证再查看');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/personal/authentication'
						})
					}, 2000)
				}
			},
			//获取角色
			getUsrInfo() {
				getByOwn().then(res => {
					if (res.data) {
						let dataInfo = res.data;
						Object.keys(dataInfo).forEach((key) => {
						 if (dataInfo[key] == 'null' || dataInfo[key] == 'undefined') {
							 dataInfo[key] = ''
						 }
						})
						this.dataInfo = dataInfo;
						if (this.dataInfo.headPortrait) {
							fileById({ fileId: this.dataInfo.headPortrait }).then(req => {
								this.$set(this.dataInfo, 'headPortraitImg',req.data.accessUrl);
								this.$storage.setItem('roleDataInfo', this.dataInfo);
							})
						}
						this.$nextTick(() => {
							this.$storage.setItem('roleDataInfo', this.dataInfo);
						})
						this.gridList.map(item => {
							item.isShow = true
							item.isAttestation = dataInfo.status
						})
						if (dataInfo.type == 1 && dataInfo.status == 0) {
							this.gridList[2].isShow = false
						}
						// this.gridList[0].isAttestation = true
						// this.gridList[3].isAttestation = true
						this.gridList[1].isExploit = false
					} else {
						this.$set(this.dataInfo, 'type',1);
						this.gridList.map(item => {
							item.isShow = false
						})
						this.$storage.setItem('roleDataInfo', this.dataInfo);
					}
				})
			},
			fillIn(val=1) {
				uni.navigateTo({
					url: `../../personal/index?id=${val}`
				})
			},
			goAuthentication() {
				uni.navigateTo({
					url: `../../personal/authentication`
				})
			},
			loginOut() {
				this.$showModal({
					title: '提示',
					content: '确定要退出吗？',
					showCancel: true,
				}, (res) => {
					this.$storage.clearStorage();
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						});
					})
				})
			},
			// getPeriodAll() {
			// 	periodGetAll().then(res => {
			// 		this.$storage.setItem('periodGetAll', res.data);
			// 	})
			// },
			// getPurposeAll() {
			// 	purposeGetAll().then(res => {
			// 		this.$storage.setItem('purposeGetAll', res.data);
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		min-height: 100vh;
		.header {
			width: 100%;
			height: 316rpx;
			background-color: #02BF88;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			image {
				width: 100%;
			}
		}
		.personal {
			display: flex;
			padding: 30rpx 20rpx 30rpx 46rpx;
			color: #fff;
			height: 136rpx;
			align-items: center;
			z-index: 1;
			position: relative;
			.headPhoto {
				width: 136rpx;
				height: 100%;
				border-radius: 50%;
			}
			.message {
				font-size: 32rpx;
				height: 100%;
				margin-left: 16rpx;
				flex: 1;
				.phone {
					margin-top: 20rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					.authentication {
						padding: 8rpx 10rpx;
						background-color: #FFFFFF;
						color: #333333;
						font-size: 28rpx;
						border-radius: 8rpx;
						display: inline-block;
					}
				}
				.name {
					display: flex;
				}
				.role {
					padding-left: 40rpx;
					text {
						display: inline-block;
						width: 100rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: #028961;
						font-size: 22rpx;
						border-radius: 0px 8rpx 0rpx 8rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.main {
			padding: 20rpx 32rpx 0;
			
			z-index: 1;
			position: relative;
			.grid {
				/deep/ .van-grid {
					border-radius: 16rpx;
					box-shadow: 0px 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				}
			}
			.cellBox {
				margin-top: 10rpx;
				/deep/ .van-cell {
					padding-top: 40rpx;
					padding-bottom: 40rpx;
				}
				/deep/ .van-button--default {
					user-select: none;
					height: 60rpx;
					color: #FFFFFF;
					margin-top: 60rpx;
					background: #49BCF2;
					border-radius: 40rpx;
					border: none;
					width: 90%;
					margin-left: 5%;
					font-size: 28rpx;
				}
				/deep/ .van-icon {
					font-size: 44rpx;
				}
			}
		}
		.bigTitle {
			position: absolute;
			bottom: 80rpx;
			left: 0;
			width: 100%;
			text-align: center;
			color: #CFCFCF;
			font-size: 32rpx;
		}
	}
</style>
